<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            setInterval(function () {
                var  date = new Date();
                // console.log(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())

                $("#hour").text(date.getHours());
                var min = date.getMinutes();
                if(min <10){
                  min= "0"+min;
                }

                $("#minute").text(date.getMinutes());

                var sce =date.getSeconds();
                if (sce <10){
                    sce ="0"+sce;
                }

                $("#second").text(date.getSeconds());
            },1000)

        })
    </script>
    <style type="text/css">

    </style>

</head>
<body>
  <div style="float:left;width: 500px;text-align: center">
   <h1 id="hour" style="color: aqua">14</h1>
   <h1>:</h1>
   <h1 id="minute" style="color: blueviolet" >33</h1>
   <h1>:</h1>
   <h1 id="second" style="color: orange">23</h1>
  </div>

</body>
</html>